<template>
	<view>
		<!-- 轮播图开始 -->
		<u-swiper :list="imgList" mode="dot" border-radius="0" indicator-pos="bottomRight"></u-swiper>
		<!-- 轮播图结束 -->
		<!-- 通知栏开始 -->
		<u-notice-bar mode="vertical" :list="noticeList"></u-notice-bar>
		<!-- 通知栏结束 -->
		<!-- 宫格布局开始 -->
		<view class="u-demo-area">
			<u-toast ref="uToast"></u-toast>
			<u-grid @click="click">
				<u-grid-item name="item1" :index="0" style="background-color: rgb(247,246,244);">
					<!-- <u-badge count="9"></u-badge> -->
					<u-icon name="star-fill" :size="46"></u-icon>
					<view class="grid-text">在线教育</view>
				</u-grid-item>
				<u-grid-item :index="1" class="grid-item" style="background-color: rgb(247,246,244);">
					<u-icon name="calendar-fill" :size="46"></u-icon>
					<view class="grid-text">福彩工具</view>
				</u-grid-item>
				<u-grid-item :index="2" style="background-color: rgb(247,246,244);">
					<u-icon name="rmb-circle-fill" :size="46"></u-icon>
					<view class="grid-text">股票工具</view>
				</u-grid-item>
				<u-grid-item :index="3" style="background-color: rgb(247,246,244);">
					<u-icon name="clock-fill" :size="46"></u-icon>
					<view class="grid-text">金融理财</view>
				</u-grid-item>
				<u-grid-item :index="3" style="background-color: rgb(247,246,244);">
					<u-icon name="server-man" :size="46"></u-icon>
					<view class="grid-text">在线客服</view>
				</u-grid-item>
				<u-grid-item :index="3" style="background-color: rgb(247,246,244);">
					<u-icon name="more-circle-fill" :size="46"></u-icon>
					<view class="grid-text">其他功能</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 宫格布局结束 -->
		<!-- 网站热门工具开始 -->
		<view class="u-config-title">
			双色球热门工具
		</view>
		<u-cell-group>
			<u-cell-item title="双色球历史中奖号码" @click="ssqItemClick(1)"></u-cell-item>
			<u-cell-item title="双色球下期中奖号码预测" @click="ssqItemClick(2)"></u-cell-item>
			<u-cell-item title="历史中奖号码预测和历史中奖号码" @click="ssqItemClick(3)"></u-cell-item>
			<u-cell-item title="从预测号码中随机组合生成可能中奖的号码" @click="ssqItemClick(4)"></u-cell-item>
			<u-cell-item title="查看指定日期之间的历史中奖号码记录" @click="ssqItemClick(5)"></u-cell-item>
			<u-cell-item title="根据自定义号码生成预测号码" @click="ssqItemClick(6)"></u-cell-item>
		</u-cell-group>
		<!-- 网站热门工具结束 -->
		<!-- 底部版权开始 -->
		<view class="footer">
			<view>版权所有: 全通数科</view>
			<view>备案号: 京ICP888999</view>
		</view>
		<!-- 底部版权结束 -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				//图片列表
				imgList: [{
						image: '/static/images/swiper/11.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: '/static/images/swiper/22.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: '/static/images/swiper/33.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				//通知列表
				noticeList: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
			}
		},
		methods: {
			click(index) {
				this.$refs.uToast.show({
					title: `点击了第${index + 1}宫格`,
					type: 'warning'
				})
			},
			ssqItemClick(index) {
				console.log(`双色球第${index}个item被点击了`)
				//获取跳转连接
				let targetUrl = ''
				switch (index) {
					case 1:
						targetUrl = '/pages/ssq/history/history'
						break;
					case 2:
						targetUrl = '/pages/ssq/next/next'
						break;
					case 3:
						targetUrl = '/pages/ssq/prediction/prediction'
						break;
					case 4:
						targetUrl = '/pages/ssq/next_all/next_all'
						break;
					case 5:
						break;
					case 6:
						break;
				}
				//跳转连接
				console.log("要跳转的连接是: ", targetUrl)
				uni.navigateTo({
					url: targetUrl
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-config-title {
		text-align: left;
		color: #a3002f;
		// padding-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.footer {
		padding: 20rpx;
	}

	.footer view {
		text-align: center;
		color: #909399;
	}
</style>
